<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>喜悦汇-微信墙</title>
		<link rel="stylesheet" type="text/css" href="/admins/vendors/bootstrap/dist/css/bootstrap.min.css"/>
		<link href="/admins/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<link href="/wechatfront/css/index.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<div class="left" style="{{empty($background)?'':'background:url(/uploads/'.$background.');
									background-size: auto 100%;
									background-repeat:no-repeat;
									background-position:center 50px'}}">
				<div class="title">
					{{$title}}
				</div>
				<ul id="wall_ul">

				</ul>
			</div>
			<div class="right">
				<i class="fa fa-expand" aria-hidden="true" onclick="requestFullScreen()"></i>
				<i class="fa fa-compress" aria-hidden="true" onclick="exitFullscreen()"></i>

				<a href="{{route('wechatfront.wall.draw',['wallid'=>$id])}}">
					<img src="/wechatfront/image/weixinqianglogo.png" alt="" class="icon"/>
				</a>
				<a href="{{route('wechatfront.wall.showqrcode',['id'=>$id])}}" target="_blank">
					<img src="{{ $qrurl}}" alt="" class="qrcode"/>
				</a>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var hisList = [];
		var newList = [];
		var lastid = 0;
		var hid_height = 120;
		var interval;
		$(function(){
			getData();
			setInterval(getData,5000);
		});

		function getData(){
			clearInterval(interval);
			var sUrl = "{{route('wechatfront.ajaxWallInfo', ['wallid' => $id,'lastid'=>'_lastid_'])}}";
			sUrl=sUrl.replace("_lastid_",lastid);
			$.ajax({
				url: sUrl,
				success: function(data){
					if(data.length>0){
						if(lastid == 0){
							//第一次
							hisList = hisList.concat(data);
						}else{
							newList = newList.concat(data);
						}
						lastid = data[data.length-1]['id'];
					}

					interval = setInterval(showData,1500);
				}
			});
		};

		function showData(){
			if(newList.length >0){
				//有新消息，显示新消息
				li = "<li><div class='img'><img src='"+newList[0]['headimgurl']+"' class='img-circle'/></div>";
				li += "<div class='data'><div class='name'>"+newList[0]['nickname']+"</div>";
				li += "<div class='info'>"+newList[0]['value']+"</div></div></li>";
				$("#wall_ul").append(li);
				$data = newList.shift();
				hisList.push($data);
			}else{
				if(hisList.length >0){
					//没有新消息，循环显示旧消息
					li = "<li><div class='img'><img src='"+hisList[0]['headimgurl']+"' class='img-circle'/></div>";
					li += "<div class='data'><div class='name'>"+hisList[0]['nickname']+"</div>";
					li += "<div class='info'>"+hisList[0]['value']+"</div></div></li>";
					$("#wall_ul").append(li);
					$data = hisList.shift();
					hisList.push($data);
				}
			}
			win_height = $(document).height();
			ul_height = $("#wall_ul").height();
			if(ul_height+hid_height > win_height){
				$("#wall_ul>li:first").remove();
			}
		};

		function changeFullScreen(){
			var isFull = isFullScreenEnabled();
			if(isFull){
				requestFullScreen();
			}else{
				exitFullscreen();
			}
		}

		//进入全屏
		function requestFullScreen() {
		    var de = document.documentElement;
		    if (de.requestFullscreen) {
		        de.requestFullscreen();
		    } else if (de.mozRequestFullScreen) {
		        de.mozRequestFullScreen();
		    } else if (de.webkitRequestFullScreen) {
		        de.webkitRequestFullScreen();
		    }
		}
		//退出全屏
		function exitFullscreen() {
		    var de = document;
		    if (de.exitFullscreen) {
		        de.exitFullscreen();
		    } else if (de.mozCancelFullScreen) {
		        de.mozCancelFullScreen();
		    } else if (de.webkitCancelFullScreen) {
		        de.webkitCancelFullScreen();
		    }
		}

	</script>
</html>
